import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Modal,
  Row,
  Col,
  Input,
  InputNumber,
  message,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Item } = Form;

interface SavePartitionProps extends FormComponentProps {
  dispatch?: Dispatch;
  values: any;
  saveVisible: boolean;
  shelvesId: number;
  changeSave: (saveVisible: boolean) => void;
  fetchAction: (typeName: string, payload: any) => void;
}

@connect(({
  partitionList: { dataInfo },
}: any) => ({ dataInfo }))

class SavePartitionElem extends Component<SavePartitionProps> {
  handleSubmit = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors, value) => {
      if (errors) return;

      const { startPkgnum = 0, endPkgnum = 0 } = value;
      if (endPkgnum - startPkgnum > 200) {
        message.error('编号范围为200数值以内');
        return;
      }

      const { shelvesId: shelfId } = this.props;
      const params = { ...value, shelfId };

      const { values: { id } } = this.props;
      if (id) params.id = id;

      const { fetchAction } = this.props;
      fetchAction('saveOrUpdate', params);
    });
  }

  renderSaveElem = ({ getFieldDecorator }: any) => (
    <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
      <Col md={12} sm={24}>
        <Item label="分区编号" colon={false}>
          {getFieldDecorator('region', {
            rules: [{ required: true, message: '请输入分区编号' }],
          })(
            <Input
              allowClear
              maxLength={1}
              placeholder="请输入"
              autoComplete="off"
            />,
          )}
        </Item>
      </Col>
      <Col md={12} sm={24}>
        <Item label="　层编号" colon={false}>
          {getFieldDecorator('layer', {
            rules: [{ required: true, message: '请输入层编号' }],
          })(
            <Input
              allowClear
              placeholder="请输入"
              autoComplete="off"
            />,
          )}
        </Item>
      </Col>
    </Row>
  )

  renderUpdateElem = ({ getFieldDecorator }: any, values: any) => (
    <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
      <Col md={12} sm={24}>
        <Item label="货架层号">
          <div>{values.layer}</div>
        </Item>
      </Col>
      <Col md={12} sm={24} style={{ display: 'flex' }}>
        <Item label="编号范围" colon={false} style={{ width: 200 }} />
        <Item>
          {getFieldDecorator('startPkgnum', {
            initialValue: values.startPkgnum,
            rules: [{ required: true, message: '请输入层编号' }],
          })(
            <InputNumber
              min={1}
              max={999}
              step={1}
              precision={0}
              placeholder="请输入"
            />,
          )}
        </Item>
        <span style={{ lineHeight: '32px', margin: '0 6px' }}>至</span>
        <Item>
          {getFieldDecorator('endPkgnum', {
            initialValue: values.endPkgnum,
            rules: [{ required: true, message: '请输入层编号' }],
          })(
            <InputNumber
              min={1}
              max={999}
              step={1}
              precision={0}
              placeholder="请输入"
            />,
          )}
        </Item>
      </Col>
    </Row>
  )

  render() {
    const {
      saveVisible,
      form,
      values,
      changeSave,
    } = this.props;

    return (
      <Modal
        title="配置编号"
        visible={saveVisible}
        width={600}
        destroyOnClose
        onOk={this.handleSubmit}
        onCancel={() => changeSave(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          {values.id ? this.renderUpdateElem(form, values) : this.renderSaveElem(form)}
        </Form>
      </Modal>
    );
  }
}

export default Form.create<SavePartitionProps>()(SavePartitionElem);
